<template>
  <div class="viewcontainer">
    <el-dialog :title="$t('system.distUser')" :visible.sync="rolePermissionVisible" width="552px">
      <setUser v-if="rolePermissionVisible" ref="user" :roleid="currentRole.id" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rolePermissionVisible = false">{{$t("common.cancel")}}</el-button>
        <el-button type="primary" @click="setUser">{{$t("common.confirm")}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="$t('system.distPermis')" :visible.sync="menuPermissionVisible" width="552px">
      <menuPermission
        permissionType="role"
        :target="currentRole.id"
        v-if="menuPermissionVisible"
        ref="menuPermission"
        :style="{height:menuPermissionHeight}"
      ></menuPermission>
      <span slot="footer" class="dialog-footer">
        <el-button @click="menuPermissionVisible = false">{{$t("common.cancel")}}</el-button>
        <el-button type="primary" @click="setMenu">{{$t("common.confirm")}}</el-button>
      </span>
    </el-dialog>

    <el-row class="view-header">
      <el-col :span="20">
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
          <el-form-item :label="$t('system.userId')">
            <el-input v-model="queryParam.id" placeholder="" />
          </el-form-item>
          <el-form-item :label="$t('system.userName')">
            <el-input v-model="queryParam.name" placeholder="" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryClick">{{$t('common.query')}}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" class="actionbar">
        <el-button type="primary" @click="add" v-if="askPermission('system_role_add')">{{$t('common.add')}}</el-button>
      </el-col>
    </el-row>
    <el-row class="view-main"> 
      <el-table :data="queryData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" width="50" />
        <el-table-column prop="id" :label="$t('system.roleId')" width="180" />
        <el-table-column prop="name" :label="$t('system.roleName')" width="180" />
        <el-table-column prop="note" :label="$t('common.note')" />
        <el-table-column fixed="right" :label="$t('common.operation')" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="small"  v-if="askPermission('system_role_setrolepermission')" @click="showSetMenu(scope.row)">{{$t("system.funcPermis")}}</el-button>
            <el-button type="text" size="small"  v-if="askPermission('system_role_setuser')" @click="showSetUser(scope.row)">{{$t("system.distUser")}}</el-button>
            <el-button type="text" size="small" v-if="askPermission('system_role_detail')" @click="edit(scope.row)">{{$t('common.edit')}}</el-button>
            <el-button type="text" size="small" v-if="askPermission('system_role_delete')" @click="remove(scope.row)">{{$t('common.delete')}}</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="view-footer pagebar">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="queryParam.$pagesize"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
// import api from "@/api/user";
import dataHelper from "@/utils/dataHelper";
import setUser from "./setUser";
import menuPermission from "../components/menuPermission";
import roleApi from "@/api/role";
import baseView from "@/views/base";
export default {
  name: "system_role_list",
  extends: baseView,
  components: { setUser, menuPermission },
  model: {
    prop: "value",
    event: "valuechange"
  },
  props: {
    value: {
      type: Object
    }
  },
  data() {
    return {
      rolePermissionVisible: false,
      menuPermissionVisible: false,
      queryParam: {
        $pageindex: 1,
        $pagesize: 25
      },
      loading: false,
      queryData: [],
      currentRole: {},
      total: 0
    };
  },

  computed: {
    menuPermissionHeight() {
      return document.body.clientHeight * 0.5 + "px";
    }
  },
  watch: {},
  mounted() {
    this.query();
  },
  methods: {
    remove(data) {
     let comfirmMsg = this.$t("common.sureDelete").replace("{0}",data.id)
     let prompt =  this.$t("common.prompt");
     let confirm =  this.$t("common.confirm");
     let cancel =   this.$t("common.cancel");
     let delSucc =  this.$t("common.delSucc")
      this.$confirm(comfirmMsg, prompt, {
        confirmButtonText: confirm,
        cancelButtonText: cancel,
        type: "warning"
      }).then(() => {
        roleApi.remove(data.id).then(res => {
          this.$message({
            message: delSucc,
            type: "success"
          });
          this.query();
        });
      }).catch(error=>{
        console.log(error)
      });
    },
    edit(data) {

      this.openByPath("/system/role/detail", { id: data.id }, {
        title: data.id+this.$t("system.roleEdit"),
        target: "_blank",
      });

   
    },
    add() {
       this.openByPath("/system/role/detail", null, {
        title: this.$t("system.roleAdd"),
        target: "_blank",
      });
     
    },
    showSetMenu(data) {
      this.currentRole = data;
      this.menuPermissionVisible = true;
    },
    showSetUser(data) {
      this.currentRole = data;
      this.rolePermissionVisible = true;
    },
    setUser(data) {
      const user = this.$refs.user;
      user.save().then(res => {
        this.rolePermissionVisible = false;
      });
    },
    setMenu() {
      const permission = this.$refs.menuPermission.getPermission();
      roleApi
        .setRolePermissions(this.currentRole.id, permission.join(","))
        .then(res => {
          this.$message({
            message: this.$t("system.funcSetSucc"),
            type: "success"
          });
          this.menuPermissionVisible = false;
        });
    },
    refreshData(){
      this.queryClick();
    },
    queryClick() {
      this.queryParam.$pageindex = 1;
      this.query();
    },
    pageChange(index) {
      this.queryParam.$pageindex = index;
      this.query();
    },
    query() {
      this.loading = true;
      dataHelper.queryHelper.query(this.$route.path, "system/role.entity", this.queryParam).then(res => {
        this.queryData = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
</style>

